<route lang="json5">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '议享圈',
  },
}
</route>
<template>
  <view class="page">
    <wd-navbar
      :zIndex="1000"
      placeholder
      fixed
      safeAreaInsetTop
      :bordered="false"
      :leftArrow="false"
      custom-class="!bg-white !border-b-none"
    ></wd-navbar>
    <view class="course-main bg-white">
      <!-- 顶部搜索栏 -->
      <view class="flex items-center">
        <view
          class="h-70rpx bg-[#FFFFFF] border-rd-[20rpx_20rpx_20rpx_20rpx] border-2rpx border-solid border-[#3670F7] flex items-center flex-1"
        >
          <view class="flex-1 h-100% ml-28rpx mr-28rpx flex items-center">
            <wd-input
              clearable
              no-border
              custom-class="w-full flex items-center"
              v-model="searchValue"
              :use-prefix-slot="true"
              placeholder="搜索"
            >
              <template #prefix>
                <image
                  class="w-40rpx h-40rpx"
                  src="/static/images/discussion/search.png"
                  mode="scaleToFill"
                />
              </template>
            </wd-input>
          </view>
          <view
            @click="onSearch"
            class="w-118rpx h-58rpx bg-[#3670F7] border-rd-[14rpx_14rpx_14rpx_14rpx] ml-a mr-6rpx font-bold text-28rpx text-[#FFFFFF] flex items-center justify-center"
          >
            搜索
          </view>
        </view>
        <view class="items-center flex" v-show="activeTab === 1">
          <!-- 头像 -->
          <image
            @click="handleToMyPublish"
            class="w-60rpx h-60rpx border-rd-[100%] ml-20rpx"
            :src="avatar ? avatar : '/static/images/comment/default_user.png'"
            mode="scaleToFill"
          />
          <!-- 消息通知 -->
          <image
            @click="handleToMsg"
            class="w-53rpx h-54rpx ml-20rpx"
            :src="
              msgIsReadStore.isRead
                ? '/static/images/discussion/msg-n.png'
                : '/static/images/discussion/msg-0.png'
            "
            mode="scaleToFill"
          />
        </view>
      </view>

      <!-- 导航标签 -->
      <wd-tabs v-model="activeTab">
        <wd-tab v-for="(tab, index) in tabs" :key="index" :title="tab" />
      </wd-tabs>
    </view>
    <!-- 内容区域 -->
    <view>
      <!-- 讨论组 -->
      <Chat v-if="activeTab === 0" :searchValue="content" />
      <!-- 讨论圈 -->
      <Comment
        ref="commentRef"
        v-if="activeTab === 1"
        :searchValue="content"
        @getHasNewMsgYn="getHasNewMsgYn"
      />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store'
import Chat from '../chat/index.vue'
/* 引入 讨论圈 组件 */
import Comment from '../comment/index.vue'
import { msgReadStore } from '@/store/msgReadStatus'

const msgIsReadStore = msgReadStore()

const userStore = useUserStore()

// 搜索相关
const searchValue = ref('')
/* 头像 */
const avatar = ref('')
/* 讨论圈搜索框 */
const content = ref('')
// 标签页相关
const activeTab = ref(0)
const tabs = ['讨论组', '讨论圈']

const state = reactive({
  tabbar: 1,
  hasNewMsgYn: false, // 是否有新消息
})

/* 跳转到我的发布页面 */
function handleToMyPublish() {
  uni.navigateTo({
    url: `/pages/comment/my/index`,
  })
}

/* 跳转到消息列表 */
function handleToMsg() {
  uni.navigateTo({
    url: `/pages/my/message/index?activeTab=1`,
  })
}

/* 是否有红点 */
function getHasNewMsgYn(val) {
  state.hasNewMsgYn = val
}

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

onLoad(async (query) => {
  avatar.value = userStore.userInfo?.avatar || ''
  if (query?.activeTab) {
    activeTab.value = Number(query.activeTab)
  }
})

// 处理扫码
const handleScan = async () => {
  try {
    // #ifdef APP-PLUS
    // APP端直接跳转扫码页
    // uni.navigateTo({
    //   url: '/pages/discussion/scan',
    // })
    // 允许从相机和相册扫码
    uni.scanCode({
      success: function (res) {
        console.log('res=======：' + res)
        console.log('条码类型：' + res.scanType)
        console.log('条码内容：' + res.result)
      },
    })
    // #endif
  } catch (error) {
    console.error('扫码失败:', error)
    uni.showToast({
      title: '扫码失败',
      icon: 'none',
    })
  }
}

// 处理扫码结果
function handleScanResult(result: string) {
  try {
    // 这里处理扫码后的业务逻辑
    console.log('扫码结果:', result)

    // 示例：解析二维码内容
    const data = JSON.parse(result)

    // 根据二维码内容类型处理不同业务
    switch (data.type) {
      case 'group':
        // 加入讨论组
        uni.navigateTo({
          url: `/pages/chat/detail?id=${data.id}`,
        })
        break

      case 'topic':
        // 查看话题
        uni.navigateTo({
          url: `/pages/comment/details/index?id=${data.id}`,
        })
        break

      default:
        uni.showToast({
          title: '未知的二维码类型',
          icon: 'none',
        })
    }
  } catch (error) {
    console.error('处理扫码结果失败:', error)
    uni.showToast({
      title: '无效的二维码',
      icon: 'none',
    })
  }
}

// 搜索方法
const onSearch = async () => {
  /* 讨论圈 */
  if (activeTab.value === 1) {
    content.value = searchValue.value
  } else if (activeTab.value === 0) {
    /* 讨论组 */
    content.value = searchValue.value
  }
}
</script>

<style lang="scss" scoped>
.page {
  background-color: #f5f5f5;
}
.course-main {
  box-sizing: border-box;
  padding: 24rpx 24rpx 0 24rpx;
  background-color: white;
}
</style>
